<template>
	<el-card>
		<i id="span1" class="el-icon-user-solid"> 系统角色</i>
		<!-- 
	   	模糊查询系统角色 
	   	 -->
		<div>
			<el-form :inline="true" :model="selectRoleForm" class="demo-form-inline">

				<el-form-item label="角色名称:">
					<el-input v-model="selectRoleForm.rolename" placeholder="请输入角色"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="selectSytemRole()">筛选</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div>
			<el-button type="primary" size="small" class="but1" @click="addSystemRoledialog=true">新增角色</el-button>
			<el-button class="but1" type="primary" size="small" @click="">导出</el-button>
			<el-button class="but1" type="primary" size="small" @click="">导入</el-button>
		</div>
		<!-- 添加系统角色 -->
		<el-dialog width="50%" title="新增" :visible.sync="addSystemRoledialog">
			<i id="span1" class="el-icon-orange"> 添加角色</i>
			<!-- <el-divider></el-divider> -->
			<div class="dialog-content">
				<el-form size="mini" ref="addSystemRoleForm" :model="addSystemRoleForm" label-position="left"
					label-width="100px" id="elform">
					<el-form-item label="用户名称" class="input-wrapper" prop="rolename">
						<el-input v-model="addSystemRoleForm.rolename" placeholder="请输入用户名称"></el-input>
					</el-form-item>
					<el-form-item label="角色编码" class="input-wrapper" prop="rolecode">
						<el-input v-model="addSystemRoleForm.rolecode" placeholder="请输入角色编码"></el-input>
					</el-form-item>
					<el-form-item label="排序" class="input-wrapper">
						<el-input v-model="addSystemRoleForm.sort" placeholder="请输入排序"></el-input>
					</el-form-item>
					<el-form-item label="备注" class="input-wrapper">
						<el-input type="textarea" v-model="addSystemRoleForm.notes" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="addSystemUser()">添加</el-button>
						<el-button @click="resertAddSystemRole()">取消</el-button>
					</el-form-item>
				</el-form>
			</div>

		</el-dialog>
		<!-- 修改系统角色信息 -->
		<el-dialog width="50%" title="修改" :visible.sync="UpSystemRoledialog">
			<i id="span1" class="el-icon-orange"> 修改角色信息</i>
			<div class="dialog-content">
				<el-form size="mini" ref="UpSystemRoleForm" :model="UpSystemRoleForm" label-position="left"
					label-width="100px" id="elform">
					<el-form-item label="用户名称" class="input-wrapper" prop="rolename">
						<el-input v-model="UpSystemRoleForm.rolename" placeholder="请输入用户名称"></el-input>
					</el-form-item>
					<el-form-item label="角色编码" class="input-wrapper" prop="rolecode">
						<el-input v-model="UpSystemRoleForm.rolecode" placeholder="请输入角色编码"></el-input>
					</el-form-item>
					<el-form-item label="排序" class="input-wrapper">
						<el-input v-model="UpSystemRoleForm.sort" placeholder="请输入排序"></el-input>
					</el-form-item>
					<el-form-item label="备注" class="input-wrapper">
						<el-input type="textarea" v-model="UpSystemRoleForm.notes" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="UpSystemUser()">修改</el-button>
						<el-button @click="resertUpSystemRole()">取消</el-button>
					</el-form-item>
				</el-form>
			</div>

		</el-dialog>
		<div>
			<!-- 表格服务信息展示 -->
			<el-table :data="RolesList" border style="width: 100%">
				<el-table-column prop="rolename" label="角色名称"></el-table-column>
				<el-table-column prop="rolecode" label="角色编码"></el-table-column>
				<el-table-column prop="createtime" label="创建时间"></el-table-column>
				<el-table-column prop="caozuo" label="操作">
					<template slot-scope="scope">
						<el-button @click="selectUserById(scope.row.id)" type="primary" size="mini">用户</el-button>
						&nbsp;
						<el-dropdown @command="handleCommand">
							<el-button type="primary" size="mini"
								class="el-icon-arrow-down el-icon--right el-dropdown-link ">更多</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{ id: scope.row.id, action: '授权' }">授权</el-dropdown-item>
								<el-dropdown-item :command="{ id: scope.row.id, action: '编辑' }">编辑</el-dropdown-item>
								<el-dropdown-item :command="{ id: scope.row.id, action: '删除' }">删除</el-dropdown-item>
								<!-- <el-dropdown-item
									:command="{ id: scope.row.id, action: (scope.row.status==0?'正常':'冻结') }">{{scope.row.status==0?'正常':'冻结'}}</el-dropdown-item> -->
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="[1, 2, 3, 4]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<el-dialog title="详情列表" :visible.sync="XiangQingdialog">

			<div>
				<!-- 用户绑定的角色表格服务信息展示 -->
				<el-table :data="UserFormList" border style="width: 100%">
					<el-table-column prop="username" label="用户账号"></el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="sex" label="性别"></el-table-column>
					<el-table-column prop="birthday" label="生日"></el-table-column>
					<el-table-column prop="phone" label="手机号"></el-table-column>
					<el-table-column prop="department" label="部门"></el-table-column>
					<el-table-column prop="resdepartment" label="负责部门"></el-table-column>
				</el-table>
				<!-- 分页 -->
				<!-- 			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="[1, 2, 3, 4]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination> -->
			</div>
		</el-dialog>
		<!-- 系统角色授权 -->
		<el-dialog width="50%" title="角色授权" :visible.sync="shouquanRoledialog" @colse="resertSystemRoleMenus">
			<el-tree :data="MenusList" ref="MenusRoleRef" show-checkbox node-key="id" :default-expanded-keys="[]"
				:default-checked-keys="SecondMenusList" :props="defaultProps">
			</el-tree>
			<el-button type="primary" @click="UpSystemRoleMenus()">修改</el-button>
			<el-button @click="resertSystemRoleMenus()">取消</el-button>
		</el-dialog>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				queryInfo: {
					pageNum: 1,
					pageSize: 3,
				},
				total: 0,
				RolesList: [],
				UserFormList: [],
				selectRoleForm: {
					rolename: ''
				},
				addSystemRoleForm: {
					rolename: '',
					rolecode: '',
					sort: 1,
					notes: ''

				},
				menusId: '',
				UpSystemRoleForm: {
					id: '',
					rolename: '',
					rolecode: '',
					sort: '',
					notes: ''
				},
				SecondMenusList: [],
				MenusList: [{
					// id: ,
					// menusname: '',
					children: [{
						// id: ,
						// label: '二级 1-1',
					}]
				}],
				defaultProps: {
					children: 'children',
					label: 'menusname'
				},
				addSystemRoledialog: false,
				UpSystemRoledialog: false,
				XiangQingdialog: false,
				shouquanRoledialog: false
			}
		},
		beforeMount: function() {
			this.selectSytemRole(); // 当前页面加载完，立马执行该方法
		},
		methods: {
			/* 根据分页查询所有 */
			async selectSytemRole() {
				var param = new URLSearchParams();
				param.append('pageNum', this.queryInfo.pageNum);
				param.append('pageSize', this.queryInfo.pageSize);
				param.append('rolename', this.selectRoleForm.rolename);
				// alert(this.queryInfo.pageNum)
				let res = await this.$http.post('selectSystemRole', param)
				if (res.data.code == 400) { // 查询失败
					this.$message.error(res.data.msg);
					this.selectRoleForm.rolename = ''
					return;
				}
				// 查询成功
				if (res.data.code == 200) {
					this.RolesList = res.data.data.list;
					// 查询总条数，赋值给total
					// console.log(res.data.data.list)
					this.total = res.data.data.total;
					this.pageNum = res.data.data.pageNum;
					this.pageSize = res.data.data.pageSize;
					this.selectRoleForm.rolename = ''

				}
			},
			// 当每页显示的条数改变时，重新查询总数据
			handleSizeChange(size) { // size ： 改变后的每页展示的条数
				this.queryInfo.pageSize = size;
				this.queryInfo.pageNum = 1;
				this.selectSytemRole();
			},
			// 根据不同的页码，来查询总数据
			handleCurrentChange(pn) { // pn 你要访问的页码
				this.queryInfo.pageNum = pn;
				this.selectSytemRole();
			},
			/* 
			 添加系统角色
			 */
			async addSystemUser() {
				var param = new URLSearchParams();
				param.append('rolename', this.addSystemRoleForm.rolename);
				param.append('rolecode', this.addSystemRoleForm.rolecode);
				param.append('notes', this.addSystemRoleForm.notes);
				param.append('sort', this.addSystemRoleForm.sort);
				// alert(this.queryInfo.pageNum)
				let res = await this.$http.post('addSystemRole', param)
				if (res.data.code == 400) { // 添加失败
					this.$message.error(res.data.msg);
					// this.selectRoleForm.rolename = ''
					return;
				}
				// 查询成功
				if (res.data.code == 200) {
					this.$message.success(res.data.msg)
					this.addSystemRoledialog = false
					this.addSystemRoleForm.rolename = ''
					this.addSystemRoleForm.rolecode = ''
					this.addSystemRoleForm.notes = ''
					this.addSystemRoleForm.sort = ''

				}
			},
			/* 取消添加事件 */
			resertAddSystemRole() {
				this.addSystemRoledialog = false
				this.addSystemRoleForm.rolename = ''
				this.addSystemRoleForm.rolecode = ''
				this.addSystemRoleForm.notes = ''
				this.addSystemRoleForm.sort = ''

			},
			/* 根据id删除系统角色 */
			async deleteRoleById(id) {
				let res = await this.$http.get('delSystemRoleById/' + id)
				if (res.data.code == 401) { // 删除失败
					this.$message.error(res.data.msg);
					return;
				}
				if (res.data.code == 400) { // 删除失败
					this.$message.error(res.data.msg);
					return;
				}
				// 删除成功
				if (res.data.code == 200) {
					this.$message.success(res.data.msg);
					this.selectSytemRole()
				}
			},
			/* 根据id查询系统用户 */
			async selectUserById(id) {
				let res = await this.$http.get('selectSystemUserByRid/' + id)
				if (res.data.code == 400) { // 失败
					this.$message.error(res.data.msg);
					return;
				}
				// 成功
				if (res.data.code == 200) {
					this.UserFormList = res.data.data
					this.XiangQingdialog = true


				}
			},
			/* 根據id查询系统角色 */
			async selectRoleById(id) {
				let res = await this.$http.get('selectSystemRoleById/' + id)
				if (res.data.code == 400) { // 失败
					this.$message.error(res.data.msg);
					return;
				}
				// 成功
				if (res.data.code == 200) {
					this.UpSystemRoleForm = res.data.data
					this.UpSystemRoledialog = true


				}
			},
			/* 修改系統角色信息 */
			async UpSystemUser() {
				var param = new URLSearchParams();
				param.append('rolename', this.UpSystemRoleForm.rolename);
				param.append('id', this.UpSystemRoleForm.id);
				param.append('rolecode', this.UpSystemRoleForm.rolecode);
				param.append('notes', this.UpSystemRoleForm.notes);
				param.append('sort', this.UpSystemRoleForm.sort);
				let res = await this.$http.post('updateSystemRole', param)
				if (res.data.code == 400) { // 失败
					this.$message.error(res.data.msg);
					return;
				}
				// 成功
				if (res.data.code == 200) {
					this.selectSytemRole()
					this.UpSystemRoledialog = false
				}
			},

			/*修改系统角色的权限  */
			async UpSystemRoleMenus() {
				let keys = [
					...this.$refs['MenusRoleRef'].getCheckedKeys(),
					...this.$refs['MenusRoleRef'].getHalfCheckedKeys()
				]
				let mid = keys.join(',')
				var param = new URLSearchParams();
				param.append('rid', this.menusId);
				param.append('mid', mid);
				let res = await this.$http.post('updateSystemRoleMenus', param)
				if (res.data.code == 400) { // 失败
					this.$message.error(res.data.msg);
					return;
				}
				// 成功
				if (res.data.code == 200) {
					this.$message.success(res.data.msg);
					this.shouquanRoledialog = false
				}
			},
			/* 取消系统角色的权限 */
			resertSystemRoleMenus() {
				this.MenusList = []
				this.SecondMenusList = []
				this.shouquanRoledialog = false
			},
			/* 取消修改系统角色 */
			resertUpSystemRole() {
				this.UpSystemRoledialog = false
			},
			/* 查询所有的菜单 */
			async selectAllMenus() {
				let res = await this.$http.get('selectSystemMenusAll')
				if (res.data.code == 400) { // 失败
					this.$message.error(res.data.msg);
					return;
				}
				// 成功
				if (res.data.code == 200) {
					this.MenusList = res.data.data
				}
			},
			/* 依据用户id查询所有二级菜单  */
			async selectMenusById(id) {
				let res = await this.$http.get('selectSystemMenusByRidtwo/' + id)
				if (res.data.code == 400) { // 失败
					// this.$message.error(res.data.msg);
					return;
				}
				// 成功
				if (res.data.code == 200) {
					this.SecondMenusList = res.data.data
				}
			},
			/*
			 点击更多按钮下拉菜单
			 */
			handleCommand(command) {
				const id = command.id;
				const action = command.action;
				if (action === '编辑') {
					this.selectRoleById(id)

				} else if (action === '删除') { // 处理删除操作
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.deleteRoleById(id)

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else if (action === '授权') { // 处理冻结操作
					this.selectAllMenus()
					this.selectMenusById(id)
					this.menusId = id
					this.shouquanRoledialog = true
				}
			}

		}
	}
</script>

<style>
</style>